<template>
  <div>
    <router-link to="/hero/add" class="btn btn-primary">添加英雄</router-link>
    <hr />
    <table class="table table-hover">
      <thead>
        <tr>
          <th>ID</th>
          <th>英雄名称</th>
          <th>英雄性别</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in heroList" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.heroName}}</td>
          <td>{{item.gender}}</td>
          <td>{{item.cTime|ft}}</td>
          <td>
            <button @click="toEdit(item.id)" class="btn btn-success">编辑</button>
            &nbsp;
            <button @click="delHero(item.id)" class="btn btn-danger">删除</button>
          </td>
        </tr>
        <!-- 暂无数据 -->
        <tr v-if="heroList.length===0">
          <td colspan="5" style="text-align:center">暂无数据</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
// 导入axios 
// import axios from 'axios'
export default {
  data () {
    return {
      heroList: []
    }
  },
  created () {
    // 获取数据
    this.getHeroList()
  },
  methods: {
    // 获取英雄列表数据
    getHeroList () {
      this.$http.get('heroes').then(res=>{
        this.heroList = res.data
      })
    },
    // 删除英雄
    delHero (id) {
      if (confirm('您确认删除该英雄吗？')) {
        this.$http.delete(`heroes/${id}`).then(()=>{
          this.getHeroList()
        })
      }
    },
    // 跳转编辑
    toEdit (id) {
      this.$router.push(`/hero/edit/${id}`)
    }
  }
};
</script>